<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
		 条件渲染:
		 1.v-if
			 写法:
				 (1).v-if="表达式”
				 (2).v-else-if="表达式"
				 (3).v-else="表达式”
			 适用于:切换顿率较低的场景。
			 特点:不展示的DOM元素直接被移除。
			 注意: v-if可以和:v-e1se-if、v-else- 起使用， 但要求结构不能被“打断”。
		 2. v- show
			 写法: v-show=" 表达式”
			 适用于:切换频率较高的场景。
			 特点:不展示的DOM元素未被移除，仅仅是使用样式隐藏掉
		 3.备注:使用v-if的时，元素可能无法获取到，而使用v-show 定可以获取到。

		 -->
		<div id="root">
			<!-- v-show 作条件渲染 -->
			<!-- <h2 v-show="false">v-show条件渲染</h2> -->
			<!-- <h2 v-show="1 === 1">v-show条件渲染</h2> -->
			
			<!-- v-if 作条件渲染 -->
			<!-- <h2 v-if="false">v-if条件渲染</h2> -->
			<!-- <h2 v-if="1 === 1">v-if条件渲染</h2> -->
			
			<!-- v-if 和v-else-if v-else -->
			<!-- <div v-if="n === 1">两路口</div>
			<div v-else-if="n === 2">较场口</div>
			<div v-else-if="n === 3">七星岗</div>
			<div v-else>解放碑</div> -->
			
			<template v-if="n===1">
				<div>鹅岭</div>
				<div>大坪</div>
				<div>石油路</div>
			</template>
		</div>
	</body>
	<script>
		new Vue({
			el:'#root',
			data(){
				return {
					n:1
				}
			},
			methods:{
				
			}
		})
	</script>
</html>